<?php echo $header; ?>
<?php if ($error_warning) { ?>
<div class="warning"><?php echo $error_warning; ?></div>
<?php } ?>
<div class="box">
  <div class="left"></div>
  <div class="right"></div>
  <div class="heading">
    <h1 style="background-image: url('view/image/template.png');"><?php echo $heading_title; ?></h1>
    <div class="buttons"><a onclick="$('#form').submit();" class="button"><span><?php echo $button_save; ?></span></a><a onclick="location = '<?php echo $cancel; ?>';" class="button"><span><?php echo $button_cancel; ?></span></a></div>
  </div>
  <div class="content">
    <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form">
      <table class="form">
        <tr>
          <td><span class="required">*</span><?php echo $entry_code; ?></td>
          <td>
            <input type="hidden" name="simple_template" value="0" />
            
            <input type="text" id="code" name="code" value="<?php echo $code; ?>" size="100" />
            <?php if (isset($error_code)) { ?>
              <span class="error"><?php echo $error_code; ?></span>
            <?php } ?></td>
          </td>
        </tr>
        <tr>
          <td><span class="required">*</span><?php echo $entry_title; ?></td>
          <td>
            <input type="text" id="title" name="title" value="<?php echo $title; ?>" size="100" />
            <?php if (isset($error_title)) { ?>
              <span class="error"><?php echo $error_title; ?></span>
            <?php } ?></td>
          </td>
        </tr>
        <tr>
          <td><span class="required">*</span><?php echo $entry_description; ?></td>
          <td>
            <textarea id="description" name="description"><?php echo $description; ?></textarea>
            <?php if (isset($error_description)) { ?>
              <span class="error"><?php echo $error_description; ?></span>
            <?php } ?></td>
          </td>
        </tr>        
        <tr>
          <td><span class="required">*</span><?php echo $entry_product_title; ?></td>
          <td>
            <input type="text" name="product_title" value="<?php echo $product_title; ?>" size="100" />
            <?php if (isset($error_product_title)) { ?>
              <span class="error"><?php echo $error_product_title; ?></span>
            <?php } ?></td>
          </td>
        </tr>
        <tr>
          <td><span class="required">*</span><?php echo $entry_footer_text; ?></td>
          <td>
            <textarea id="footer_text" name="footer_text"><?php echo $footer_text; ?></textarea>
            <?php if (isset($error_footer_text)) { ?>
              <span class="error"><?php echo $error_footer_text; ?></span>
            <?php } ?></td>
          </td>
        </tr>    
        <!--
        <tr>
          <td colspan="2"><h2><?php echo $entry_product_area; ?></h2></td>          
        </tr>
        -->
        <tr>
          <td><?php echo $entry_status; ?></td>
          <td>
              <select name="status">
                <?php if($status){ ?>
                  <option value="1" selected="selected"><?php echo $text_enabled; ?></option>
                  <option value="0"><?php echo $text_disabled; ?></option>
                <?php } else { ?>
                  <option value="1"><?php echo $text_enabled; ?></option>
                  <option value="0" selected="selected"><?php echo $text_disabled; ?></option>
                <?php } ?>
              </select>
          </td>
        </tr> 
        <tr>
          <td><?php echo $entry_limit; ?></td>
          <td>
            <input type="text" id="product_limit" name="product_limit_text" value="<?php echo $product_limit; ?>" size="1" disabled="disabled" />
            <input type="hidden" name="product_limit" value="<?php echo $product_limit; ?>" />
          </td>
        </tr>
        <tr>
          <td>Layout</td>
          <td>
            <select name="template_layout">
              <option value="default" <?php echo $template_layout == 'default' ? 'selected="selected"' : ''; ?>>Default layout</option>
              <option value="easter" <?php echo $template_layout == 'easter' ? 'selected="selected"' : ''; ?>>Easter layout</option>            
            </select>
          </td>
        </tr>
        <tr>
            <td><span class="required">*</span><?php echo $entry_product; ?></td>
            <td>
                <table>
                  <tr>
                    <td style="padding: 0;" colspan="3"><select id="category" style="margin-bottom: 5px;" onchange="getProducts();">
                      <?php foreach ($categories as $category) { ?>
                      <option value="<?php echo $category['category_id']; ?>"><?php echo $category['name']; ?></option>
                      <?php } ?>
                    </select></td>
                  </tr>
                  <tr>
                    <td style="padding: 0;"><select multiple="multiple" id="product" size="10" style="width: 550px;"></select></td>
                    <td style="vertical-align: middle;"><input type="button" value="Add product" onclick="addProduct();" /></td>
                  </tr>
                </table>               
            </td>
        </tr> 
        <tr>
            <table class="list" id="product_featured">
                <thead>
                    <tr>                      
                        <td class="left">Name</td>
                        <td class="right">Price</td>
                        <td class="right">Discount</td>
                        <td class="left">Image</td>                  
                        <td class="left">Remove</td>
                    </tr>
                </thead>
                <tbody>
                    <?php $i = 0; ?>
                    <?php if($product_featured){ ?>
                        <?php foreach ($product_featured as $featured) { ?>                         
                            <tr id="product_featured<?php echo $i; ?>"> 
                                <td id="product_id<?php echo $featured['product_id']; ?>" class="left">
                                    <input type="hidden" name="product_featured[<?php echo $i; ?>][product_id]" value="<?php echo $featured['product_id']; ?>" />
                                    <input type="text" name="product_featured[<?php echo $i; ?>][name]" value="<?php echo $featured['name']; ?>" size="100" />
                                </td>
                                <td class="right"><input type="text" class="right" name="product_featured[<?php echo $i; ?>][price]" value="<?php echo $featured['price']; ?>" size="5" /></td>
                                <td class="right"><input type="text" class="right" name="product_featured[<?php echo $i; ?>][discount]" value="<?php echo $featured['discount']; ?>" size="5" /></td>
                                <td class="left">
                                    <input type="hidden" id="image<?php echo $i; ?>" name="product_featured[<?php echo $i; ?>][image]" value="<?php echo $featured['image']; ?>" />                                    
                                    <img src="<?php echo $featured['preview']; ?>" alt="" id="preview<?php echo $i; ?>" class="image" onclick="image_upload('image<?php echo $i; ?>', 'preview<?php echo $i; ?>');" />
                                <td class="left"><a onclick="removeProduct(<?php echo $i; ?>);" class="button"><span>Remove</span></a></td>
                            </tr>
                            <?php $i++; ?>
                        <?php } ?> 
                    <?php }else{ ?>
                        <tr><td colspan="5"></td></tr>
                    <?php } ?>
                </tbody>
                <?php if (isset($error_products)){ ?>
                  <tfoot>
                    <tr>
                      <td colspan="5"><span class="error"><?php echo $error_products; ?></span></td>
                    </tr>
                  </tfoot>                  
                <?php } ?>                
            </table>    
        </tr>     
      </table>
    </form>
  </div>
</div>
<script type="text/javascript" src="view/javascript/ckeditor/ckeditor.js"></script>
<script type="text/javascript"><!--
  CKEDITOR.replace('description', {
      filebrowserBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
      filebrowserImageBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
      filebrowserFlashBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
      filebrowserUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
      filebrowserImageUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
      filebrowserFlashUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>'
  });
  
  CKEDITOR.replace('footer_text', {
      filebrowserBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
      filebrowserImageBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
      filebrowserFlashBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
      filebrowserUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
      filebrowserImageUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
      filebrowserFlashUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>'
  });
//--></script>

<script type="text/javascript"><!--
  var last_row = <?php echo $i; ?>;
  function addProduct() {         
      if($('#product_featured tr[id^=\'product_featured\']').length >= $('#product_limit').val()){
          //alert("You can only add 3 products.");
          return;
      }
      
      
      $('#product :selected').each(function(){ 
          if($('#product_id' + $(this).attr('value')).length <= 0){   
              var html = '';
              html += '<tr id="product_featured' + last_row + '">';
              html += '   <td id="product_id' + $(this).attr('value') + '"' + ' class="left">';
              html += '       <input type="hidden" name="product_featured[' + last_row + '][product_id]" value="' + $(this).attr('value') + '" />';
              html += '       <input type="text" name="product_featured[' + last_row + '][name]" value="' + $(this).html() + '" size="100" />';
              html += '   </td>';
              html += '   <td class="right"><input type="text" class="right" name="product_featured[' + last_row + '][price]" value="' + $(this).attr('alt') + '" size="5" /></td>';
              html += '   <td class="right"><input type="text" class="right" name="product_featured[' + last_row + '][discount]" value="0" size="5" /></td>';
              html += '   <td class="left">' ;
              html += '       <input type="hidden" id="image' + last_row + '" name="product_featured[' + last_row + '][image]" value="' + $(this).attr('shape') + '" />';
              html += '       <img src="' + $(this).attr('rel') + '" alt="" id="preview' + last_row + '" class="image" onclick="image_upload(\'image' + last_row + '\', \'preview' + last_row + '\');" />';
              html += '   </td>';
              html += '   <td class="left"><a onclick="removeProduct(' + last_row + ');" class="button"><span>Remove</span></a></td>';
              html += '</tr>';                    
          
              if($('#product_featured tr[id^=\'product_featured\']').length > 0){
                  $('#product_featured tbody').append(html);
              }
              else{
                  $('#product_featured tbody').html(html);    
              }
              
              last_row++;
          }
          else{
              alert("This product has been added.");
          }
      });
  }
  
  function removeProduct(row) {
      $('#product_featured' + row).remove();
  }
  
  function getProducts() {
      $('#product option').remove();
      
      $.ajax({
          url: 'index.php?route=newsletter/template/category&token=<?php echo $token; ?>&category_id=' + $('#category').attr('value'),
          dataType: 'json',
          success: function(data) {
              for (i = 0; i < data.length; i++) {
                   $('#product').append('<option value="' + data[i]['product_id'] + '" alt="' + data[i]['price'] + '" shape="' + data[i]['image'] + '" rel="' + data[i]['preview'] + '">' + data[i]['name'] + '</option>');
              }
          }
      });
  }
  
  function getProductDetail() {
      $('#featured option').remove();
      
      $.ajax({
          url: 'index.php?route=newsletter/template/product&token=<?php echo $token; ?>',
          type: 'POST',
          dataType: 'json',
          data: $('#product_featured input'),
          success: function(data) {
              $('#product_featured input').remove();
              
              for (i = 0; i < data.length; i++) {
                   $('#featured').append('<option value="' + data[i]['product_id'] + '" alt="' + data[i]['price'] + '" shape="' + data[i]['image'] + '" rel="' + data[i]['preview'] + '">' + data[i]['name'] + '</option>');
                  
                  //$('#product_featured').append('<input type="hidden" name="product_featured[]" value="' + data[i]['product_id'] + '" />');
              } 
          }
      });
  }
  
  getProducts();
  //getProductDetail();
//--></script>

<script type="text/javascript" src="view/javascript/jquery/ui/ui.draggable.js"></script>
<script type="text/javascript" src="view/javascript/jquery/ui/ui.resizable.js"></script>
<script type="text/javascript" src="view/javascript/jquery/ui/ui.dialog.js"></script>
<script type="text/javascript" src="view/javascript/jquery/ui/external/bgiframe/jquery.bgiframe.js"></script>
<script type="text/javascript"><!--
    function image_upload(field, preview) {
        $('#dialog').remove();
        
        $('#content').prepend('<div id="dialog" style="padding: 3px 0px 0px 0px;"><iframe src="index.php?route=common/filemanager&token=<?php echo $token; ?>&field=' + encodeURIComponent(field) + '" style="padding:0; margin: 0; display: block; width: 100%; height: 100%;" frameborder="no" scrolling="auto"></iframe></div>');
        
        $('#dialog').dialog({
            title: '<?php echo $text_image_manager; ?>',
            close: function (event, ui) {
                if ($('#' + field).attr('value')) {
                    $.ajax({
                        url: 'index.php?route=common/filemanager/image&token=<?php echo $token; ?>',
                        type: 'POST',
                        data: 'image=' + encodeURIComponent($('#' + field).attr('value')),
                        dataType: 'text',
                        success: function(data) {
                            $('#' + preview).replaceWith('<img src="' + data + '" alt="" id="' + preview + '" class="image" onclick="image_upload(\'' + field + '\', \'' + preview + '\');" />');
                            
                            if(data.indexOf('no_image') > 0){                             
                                $('#' + field).attr('value', '');
                            }
                        }                     
                    });
                }
            },    
            bgiframe: false,
            width: 700,
            height: 400,
            resizable: false,
            modal: false
        });
    };
//--></script>  

<?php echo $footer; ?>